<template>
  <div class="dataUSA">
    <div class="left">
      <happy-scroll color="rgba(6,6,13,0.3)" size="8" resize>
        <div class="cont" style="padding-right:15px">
          <!-- <el-table ref="multipleTable" :data="navMenus" :show-header="showHeader" fit highlight-current-row @row-click="rowclick" :row-class-name="tableRowClassName">
            <el-table-column prop="organization" fixed="left" width="290" align="center"> </el-table-column>
          </el-table> -->
          <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" background-color="#ECF5FF" @select="selNavClick">
              <template v-for="navMenu in navMenus">
                <el-menu-item :key="navMenu.defenceId" :data="navMenu" :index="navMenu.organization" >
                  <span slot="title">{{navMenu.organization}}</span>
                </el-menu-item>
              </template>
          </el-menu>
        </div>
      </happy-scroll>
    </div>
    <div class="right">
      <el-table :data="tableData" :header-cell-style="{background: 'rgba(118,201,241,0.10)',color: 'rgba(1,0,0,0.65)'}" style="float:right">
          <el-table-column prop="" label="序号" width="80" align="center">
            <template slot-scope="scope">
              <span>{{(page - 1) * perPage + scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="dataAddress1" label="数据地址" width="260" align="center"> </el-table-column>
          <el-table-column prop="websiteName" label="网站名称" align="center"> </el-table-column>
          <el-table-column prop="dataType" label="数据类型"  align="center"> </el-table-column>
          <el-table-column prop="title" label="标题" width="200" align="center"> </el-table-column>
          <el-table-column prop="author" label="作者" align="center"> </el-table-column>
          <el-table-column prop="text1" label="正文" width="280" align="center"> </el-table-column>
          <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                  <el-button @click="checkClick2(scope.$index,scope.row)" type="text" size="small" :disabled="isCheck1">查看</el-button>
              </template>
          </el-table-column>
      </el-table>
    </div>
     <!-- 美国国防部数据 -->
    <el-dialog width="1200px" :visible.sync="dialogUSA">
        <el-form :model="dataFormUSA" ref="dataFormUSA" label-width="10px" size="small" style="text-align:left;">
            <div style="font-size:22px;font-weight:bold;text-align:center">装备经济性详情页</div>
            <div style="font-size:18px;font-weight:bold;margin-top:10px;margin-left:10px">采集信息</div>
            <div style="font-size:16px;margin-top:10px;margin-left:10px;height:40px;line-height:40px">
                <el-col :span="8"><div><label style="font-weight:bold">网站名称：</label>{{dataFormUSA.websiteName}}</div></el-col>
                <el-col :span="8"><div><label style="font-weight:bold">爬虫名称：</label>{{dataFormUSA.spiderName}}</div></el-col>
                <el-col :span="8"><div></div></el-col>
            </div>
            <div style="font-size:16px;margin-top:10px;margin-left:10px;height:40px;line-height:40px">
                <el-col :span="8"><div><label style="font-weight:bold">数据源类型：</label>{{dataFormUSA.dataSourceType}}</div></el-col>
                <el-col :span="8"><div><label style="font-weight:bold">数据类型：</label>{{dataFormUSA.dataType}}</div></el-col>
                <el-col :span="8"><div><label style="font-weight:bold">采集方式：</label>{{dataFormUSA.collectionMode}}</div></el-col>
            </div>
            <div style="font-size:16px;margin-top:10px;margin-left:10px;height:40px;line-height:40px">
                <el-col :span="8"><div><label style="font-weight:bold">发布时间：</label>{{dataFormUSA.publishTime}}</div></el-col>
                <el-col :span="8"><div><label style="font-weight:bold">采集时间：</label>{{dataFormUSA.collectionTime}}</div></el-col>
                <el-col :span="8"><div></div></el-col>
            </div>
            <div style="font-size:16px;margin-top:10px;margin-left:10px;height:60px">
                <el-col :span="1.5"><div><label style="font-weight:bold">数据地址：</label></div></el-col>
                <el-col :span="21"><a :href="dataFormUSA.dataAddress" target="_blank">{{dataFormUSA.dataAddress}}</a></el-col>
            </div>
            <hr style='border:0.1px inset #E9E9E9;'>
            <div style="font-size:18px;font-weight:bold;margin-top:20px;margin-left:10px">基础信息</div>
            <el-form-item style="font-size:18px;margin-top:10px"> <label style="font-weight:bold">标题：</label> {{dataFormUSA.title}} </el-form-item>
            <el-form-item style="font-size:18px;margin-top:10px"> <label style="font-weight:bold">作者：</label> {{dataFormUSA.author}} </el-form-item>
            <el-form-item style="font-size:18px;margin-top:10px"> <label style="font-weight:bold">正文：</label> {{dataFormUSA.text}} </el-form-item>
            <el-form-item style="font-size:18px;margin-top:10px"> 
                <el-col :span="1.5"><span style="font-weight:bold">文档附件信息：</span></el-col>
                <el-col :span="21"><span v-html="dataFormUSA.attachedFileInfo"></span></el-col>
            </el-form-item>
            <div style="height:20px"></div>
        </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import { HappyScroll } from 'vue-happy-scroll'
  import 'vue-happy-scroll/docs/happy-scroll.css'
  export default {
    name: 'child',
    props: ['tableData'],
    data() {
      return {
        navMenus: [],
        isCheck1: true, // 是否有查看权限
        activeIndex: '0',
        showHeader: false,
        page:1,
        perPage:10,
        dialogUSA: false,
        dataFormUSA: {
            dataAddress: "",
            websiteName: "",
            spiderName: "",
            dataSourceType: "",
            dataType: "",
            collectionMode: "",
            collectionTime: "",
            publishTime: "",
            title: "",
            author: "",
            text: "",
            attachedFileInfo: "",
        },
      };
    },
    components: {
      'happy-scroll': HappyScroll
    },
    methods: {
      getLeftData() {
        this.$api.dataManage.defenseSearch().then(res => {
          // console.log('999999999999999999996666666666666');
          console.log(res);
          this.navMenus = res.data
          this.activeIndex = res.data[0].organization
          this.$emit('getChild', res.data[0].organization);
        })
        this.$api.user.findUserRight(sessionStorage.getItem('userId')).then((res) => {
          this.isCheck1 = !this.$api.common.isArrContainStr(res.data, 'kysj:data:view')
        })
      },
      getCheck(isCheck) {
        this.isCheck1 = isCheck
      },
      selNavClick(index) {
        console.log(index);
        // 向父组件传值
        this.$emit('getChild', index);
      },
      //  tableRowClassName({row, rowIndex}) {
      //   return 'success-row';
      // }
      //  美国国防部
      checkClick2(index,row) {
        console.log(row);
        this.dialogUSA = true
        if(row.attachedFileInfo !== null) {
            if(row.attachedFileInfo.indexOf("!@@!") > 0) {
                console.log("aaaaaaaaaaaaaaaaaaaaa");
                row.attachedFileInfo = row.attachedFileInfo.replace(/!@@!/g,"<br>")
            }
        }
        this.dataFormUSA = Object.assign({}, row);
      },
    },
    mounted(){
        this.getLeftData()
    },
  }   
</script>

<style>
.dataUSA {
    height: 750px;
    background-color: rgb(255, 255, 255);
}

.dataUSA .left {
  height: 750px;
  width: 14%;
  /* background-color: #E4E7ED; */
  display: inline-block;
}

.dataUSA .right {
  height: 750px;
  width: 84%;
  padding-left: 15px;
  background-color: rgb(255, 255, 255);
  display: inline-block;
}

.left .el-table .success-row {
    background: #ebebeb;
  }
</style>